<template>
	<view class="box">
		<view class="head">
			<image :src="userAvatar" mode="aspectFill" class="avatar"></image>
			<view class="editAvatar img-center" @click="changeAvatar">修改头像</view>
			<view class="username">{{username}}</view>
		</view>
		<view class="main">
			<view class="fav-tab">
				<view class="fav-tab-item" @click="$go2Page('courseCollect')">
					<uni-icons type="star-filled" size="28" color=" #FFA500"
						class="mine-icon img-center img-block"></uni-icons>
					课程收藏
				</view>
				<view class="fav-tab-item" @click="$go2Page('commonSport')">
					<uni-icons type="fire-filled" size="28" color="red"
						class="mine-icon img-center img-block"></uni-icons>
					运动收藏
				</view>
			</view>
			<view class="main-content">
				<template v-for="item  in contentItems">
					<view class="section" @click="delayFn(item.page,item.itemName)">
						<image style="margin-right: 10rpx;" :src="item.itemImg" class="mine-icon" mode="widthFix">
						</image>
						{{item.itemName}}
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		verify
	} from '../../database/index.js'
	export default {
		onShow() {
			this.userAvatar = this.$store.getters.getUserAvatar
			this.username = this.$store.getters.getUserName
			this.$forceUpdate()
		},
		onPullDownRefresh() {
			this.userAvatar = this.$store.getters.getUserAvatar
			this.username = this.$store.getters.getUserName
			this.$forceUpdate()
		},
		data() {
			return {
				userAvatar: this.$store.getters.getUserAvatar,
				username: this.$store.getters.getUserName,
				contentItems: [{
					itemName: '个人信息',
					itemImg: '../../static/image/personInfo.svg',
					page: 'editPersonInfo'
				}, {
					itemName: '动态管理',
					itemImg: '../../static/image/dynamicEdit.svg',
					page: 'manageDynamic'
				}, {
					itemName: '运动健康统计',
					itemImg: '../../static/image/sportRecord.svg',
					page: 'trainRecord'
				}, {
					itemName: '密码修改',
					itemImg: '../../static/image/pwdEdit.svg',
					page: 'editPassword'
				}, {
					itemName: '退出',
					itemImg: '../../static/image/logout.svg',
					page: ''
				}]
			}
		},
		methods: {
			delayFn(page, label) {
				if (label == '退出') {
					this.$store.commit('logout')
					uni.redirectTo({
						url: '/pages/login/login'
					})
				} else {
					this.$go2Page(page)
				}
			},
			async changeAvatar() {
				let res = await uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera']
				})
				let path = res.tempFilePaths[0]
				let name = res.tempFiles[0].name
				if (!res) {
					this.$showMsg('取消修改头像')
					return
				}
				let res1 = await uniCloud.uploadFile({
					filePath: path,
					cloudPath: 'userAvatar/' + Math.ceil(Math.random() * 10000000),
					cloudPathAsRealPath: true,
				})
				let [isupdate, msg] = await verify('user', {
					_id: this.$store.getters.getToken
				}, {
					user_avatar: res1.fileID
				})

				if (isupdate) {
					this.$showMsg('修改头像成功')
					this.$store.commit('setAvatar', res1.fileID)
					this.userAvatar = res1.fileID
				} else {
					this.$showMsg('修改头像失败')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../static/styles/common.scss';
	$sectionHeight: 40rpx;

	.main {
		display: flex;
		flex-direction: column;
		color: black;
		background-color: white;
		flex: 1;
		padding: 0 30rpx;

		.main-content {
			flex: 1;

			.section {
				color: #292929;
				position: relative;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #e7e7e7;
				height: $sectionHeight;

				&:last-child {
					border-bottom: none;
				}

				image {
					vertical-align: text-bottom;
				}

				&::after {
					content: '>';
					font-weight: 600;
					color: #d8d8d8;
					position: absolute;
					right: 20rpx;
				}
			}
		}

		.fav-tab {
			color: #787878;
			position: relative;
			display: flex;
			box-sizing: border-box;
			flex-direction: row;
			justify-content: space-around;
			background-color: rgba(100, 149, 237, .3);
			border-radius: 0 20rpx 0;
			padding: 20rpx 50rpx;
			margin: 15rpx 0;


			&::before {
				content: '';
				top: 25%;
				width: 8rpx;
				height: 50%;
				border-radius: 5rpx;
				background-color: rgba(245, 245, 245, .8);
				position: absolute;
				left: 50%
			}

			.fav-tab-item {}
		}
	}

	.mine-icon {
		width: $sectionHeight;
	}

	.box {
		display: flex;
		flex-direction: column;
		color: white;
		height: 100%;
		background-color: red;

		.head {
			background-color: $global_nav ;
			height: 340rpx;
			border-bottom: 8rpx solid rgba(192, 192, 192, .8);
			display: grid;

			.avatar {
				box-sizing: border-box;
				height: 200rpx;
				width: 200rpx;
				border: 8rpx solid #E6E6FA;
				border-radius: 50%;
				place-self: center;
				display: block;
			}

			.username {
				color: #4682B4;
				place-self: center;
				font-weight: 200;
				font-size: 1.3rem;
				letter-spacing: 0.1rem;
				margin-bottom: 10rpx;
			}

			.editAvatar {
				margin-top: 10rpx;
				text-decoration: underline;
				font-weight: 200;
				font-size: 0.8rem;

			}
		}
	}
</style>